import {Button, Form, message, Modal, Space} from "antd";
import React, {useEffect, useState} from "react";
import {listProductionLineUsingGET} from "@/services/model/productionLineController";
import {listBaseStepUsingGET} from "@/services/model/baseStepController";
import {useModel} from "@@/exports";
import CustomSelect from "@/pages/components/CustomSelect";
import {addDisplayStepUsingPOST, editDisplayStepUsingPUT} from "@/services/model/displayStepController";
import {ActionType} from "@ant-design/pro-components";

type ModelProps = {
  saveType: string,
  isModalOpen: boolean,
  onCancel: () => void,
  initProductionLineValue: string,
  initKeyStepValue: string[],
  actionRef: React.MutableRefObject<ActionType | undefined>,
}

const layoutStyle = {
  labelCol: {span: 6},
  wrapperCol: {span: 16},
};
const tailLayout = {
  wrapperCol: {offset: 8, span: 16},
};

const AddOrEditModel: React.FC<ModelProps> = ({
                                           saveType,
                                           isModalOpen,
                                           onCancel,
                                           initProductionLineValue,
                                           initKeyStepValue,
                                           actionRef
                                         }) => {
  const [selectProductionLineValue, setSelectProductionLineValue] = useState('');
  const [selectKeyStepValue, setSelectKeyStepValue] = useState<string[]>([]);
  const [prevItems, setPrevItems] = useState(isModalOpen);
  if (isModalOpen !== prevItems) {
    setPrevItems(isModalOpen);
    setSelectProductionLineValue(initProductionLineValue);
    setSelectKeyStepValue(initKeyStepValue);
  }

  const {initialState} = useModel('@@initialState');

  const [addAndEditForm] = Form.useForm();

  const [productionLineCodeList, setProductionLineCodeList] = useState<{
    id: string | undefined,
    name: string | undefined
  }[]>([]);
  const [productionLineNameList, setProductionLineNameList] = useState<{
    id: string | undefined,
    name: string | undefined
  }[]>([]);
  const [baseStepList, setBaseStepList] = useState<{
    id: string | undefined,
    name: string | undefined
  }[]>([]);
  useEffect(() => {
    listProductionLineUsingGET({
      commitUserId: initialState?.currentUser?.id,
    }).then((result) => {
      if (result.code === 0 && result.data) {
        const dataCodeList = result.data.map(item => {
          return {
            id: item.code,
            name: item.code,
          }
        })
        const dataNameList = result.data.map(item => {
          return {
            id: item.code,
            name: item.name,
          }
        })
        setProductionLineCodeList(dataCodeList);
        setProductionLineNameList(dataNameList);
      }
    });
    listBaseStepUsingGET().then((result) => {
      if (result.code === 0 && result.data) {
        const dataList = result.data.map(item => {
          return {
            id: item.code,
            name: item.name + " [" + item.code + "]",
          }
        })
        setBaseStepList(dataList);
      }
    });
  }, []);

  const onSave = async () => {
    const newAttendanceInfo: API.AddDisplayStepQuery = {
      currentUserId: initialState?.currentUser?.id,
      workLineCode: selectProductionLineValue,
      step1Code: selectKeyStepValue[0],
      step2Code: selectKeyStepValue[1],
      step3Code: selectKeyStepValue[2],
      step4Code: selectKeyStepValue[3],
      step5Code: selectKeyStepValue[4],
      step6Code: selectKeyStepValue[5],
      step7Code: selectKeyStepValue[6],
      step8Code: selectKeyStepValue[7],
      step9Code: selectKeyStepValue[8],
      step10Code: selectKeyStepValue[9],
      step11Code: selectKeyStepValue[10],
      step12Code: selectKeyStepValue[11],
    };
    const result = await addDisplayStepUsingPOST(newAttendanceInfo);
    if (result.code === 0 && result.data) {
      message.success('添加成功');
      onCancel();
    } else {
      message.warning(result.message);
    }
    actionRef.current?.reload();
  };
  const onEdit = async () => {
    let newAttendanceInfo: API.EditDisplayStepQuery = {
      workLineCode: selectProductionLineValue,
      step1Code: selectKeyStepValue[0],
      step2Code: selectKeyStepValue[1],
      step3Code: selectKeyStepValue[2],
      step4Code: selectKeyStepValue[3],
      step5Code: selectKeyStepValue[4],
      step6Code: selectKeyStepValue[5],
      step7Code: selectKeyStepValue[6],
      step8Code: selectKeyStepValue[7],
      step9Code: selectKeyStepValue[8],
      step10Code: selectKeyStepValue[9],
      step11Code: selectKeyStepValue[10],
      step12Code: selectKeyStepValue[11],
    };
    const result = await editDisplayStepUsingPUT(newAttendanceInfo);

    if (result.code === 0 && result.data) {
      message.success('修改成功');
      actionRef.current?.reload();
      onCancel();
    } else {
      message.warning(result.message);
    }
  };
  const onReset = () => {
    setSelectProductionLineValue('')
    setSelectKeyStepValue([])
    addAndEditForm.resetFields();
  };

  return (
    <>
      <Modal title={saveType === 'edit' ? '修改产线工序' : '新增产线工序'} open={isModalOpen}
             onCancel={onCancel}
             footer={false}>
        <Form
          name="basic"
          form={addAndEditForm}
          {...layoutStyle}
          style={{maxWidth: 500}}
          onFinish={saveType === 'edit' ? onEdit : onSave}
        >
          <Form.Item
            label="产线编码"
            key='workLineCode'
          >
            {saveType === 'edit' ? selectProductionLineValue :
              <CustomSelect name={"产线编码"} datalist={productionLineCodeList}
                            setSelectData={(value) => setSelectProductionLineValue(value)}
                            selectDate={selectProductionLineValue}/>}
          </Form.Item>
          <Form.Item
            label="产线名称"
            key="workLineName"
          >
            {saveType === 'edit' ? productionLineNameList.map(item => {
              if (item.id === selectProductionLineValue) {
                return item.name;
              } else {
                return ''
              }
            }) : <CustomSelect name={"产线名称"} datalist={productionLineNameList}
                               setSelectData={(value) => setSelectProductionLineValue(value)}
                               selectDate={selectProductionLineValue}/>}

          </Form.Item>
          <Form.Item
            label="工序1"
            key="step1Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[0] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[0]}/>
          </Form.Item>
          <Form.Item
            label="工序2"
            key="step2Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[1] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[1]}/>
          </Form.Item>
          <Form.Item
            label="工序3"
            key="step3Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[2] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[2]}/>
          </Form.Item>
          <Form.Item
            label="工序4"
            key="step4Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[3] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[3]}/>
          </Form.Item>
          <Form.Item
            label="工序5"
            key="step5Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[4] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[4]}/>
          </Form.Item>
          <Form.Item
            label="工序6"
            key="step6Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[5] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[5]}/>
          </Form.Item>
          <Form.Item
            label="工序7"
            key="step7Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[6] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[6]}/>
          </Form.Item>
          <Form.Item
            label="工序8"
            key="step8Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[7] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[7]}/>
          </Form.Item>
          <Form.Item
            label="工序9"
            key="step9Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[8] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[8]}/>
          </Form.Item>
          <Form.Item
            label="工序10"
            key="step10Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[9] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[9]}/>
          </Form.Item>
          <Form.Item
            label="工序11"
            key="step11Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[10] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[10]}/>
          </Form.Item>
          <Form.Item
            label="工序12"
            key="step12Code"
          >
            <CustomSelect name={""} datalist={baseStepList}
                          setSelectData={(value) => setSelectKeyStepValue(prevState => {
                            prevState[11] = value;
                            return [...prevState];
                          })} selectDate={selectKeyStepValue[11]}/>
          </Form.Item>

          <Form.Item {...tailLayout} key="submit&reset">
            <Space>
              <Button type="primary" htmlType="submit" key="submit">
                提交
              </Button>
              <Button disabled={saveType === 'edit'} htmlType="button" onClick={onReset} key="reset">
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default AddOrEditModel;
